<template>
    <div style="border-color: #f2f2f6;">
      <el-button type="primary" style="margin-left: 16px" @click="drawer = true">新增房型</el-button>
      <el-button type="text" @click="handleAllDelete()">批量删除</el-button>
        <el-input
      v-model="form.RoomName"
      style="max-width: 300px"
      placeholder="房型名称"
      class="input-with-select"
    >
    <template #append>
        <el-button @click="RoomTypegetlist()" :icon="Search" />
      </template>
    </el-input>
    </div>
     
    <el-table ref="selectedRows" :data="tableData" style="width: 100%; margin-top: 30px;">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="roomName" label="房型名称" width="150" />
      <el-table-column prop="roomPrice" label="门市价（元）" width="150" />
      <el-table-column prop="roomDeposit" label="押金（元）" width="150" />
      <el-table-column prop="roomAcreage" label="房间面积" width="150" />
      <el-table-column prop="peopleNumber" label="可住人数" width="150" />
      <el-table-column label="操作" width="250" >
        <template #default="{row}">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
          <el-button type="text" @click="">投放</el-button>
          <el-button type="text" @click="SetRoomCode(row)">设置房号</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>
      <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto;height: 585px;">
      <el-drawer v-model="drawer" title="I am the title" size="70%" :with-header="false">
    <span><h3>添加房型</h3></span>
    <template #footer>
      <div class="dialog-footer" style="background-color:#f2f2f6;">
        <el-form-item label="房型名称" style="width: 350px;">
        <el-input v-model="RoomTypes.roomName" placeholder="房间名称" maxlength="10"   />
      </el-form-item>
      <el-form-item label="门市价" style="width: 350px;">
        <el-input v-model="RoomTypes.roomPrice" placeholder="门市价"  />
      </el-form-item>
      <el-form-item label="押金" style="width: 350px;">
        <el-input v-model="RoomTypes.roomDeposit" placeholder="押金"  />
      </el-form-item>
      <el-form-item label="房型面积" style="width: 350px;">
        <el-input v-model="RoomTypes.roomAcreage" placeholder="房型面积"  />
      </el-form-item>
      <el-form-item label="可住人数" style="width: 350px;">
        <el-input v-model="RoomTypes.peopleNumber" placeholder="可住人数"  />
      </el-form-item>
      <el-form-item label="同住人预留信息" style="width: 350px;">
        <el-switch v-model="RoomTypes.partner" />
      </el-form-item> 
      <el-form-item label="可否加床" style="width: 550px;">
        <el-radio-group v-model="RoomTypes.addBed">
        <el-radio value="1">不可加床</el-radio>
        <el-radio value="2">免费加床</el-radio>
        <el-radio value="3">收费加床</el-radio>
        <el-radio value="4">自定义</el-radio>
      </el-radio-group>
      </el-form-item> 
      <el-form-item label="房型图片">
        <el-upload
        class="avatar-uploader"
        action="http://120.26.135.179:8033/api/RoomType/UploadImage"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="RoomTypes.roomTypeImage" :src="RoomTypes.roomTypeImage" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      </el-form-item> 
      <el-form-item label="房型视频" style="width: 350px;">
        <el-upload
    v-model:file-list="RoomTypes.roomTypeVideo"
    class="upload-demo"
    action="http://120.26.135.179:8033/api/RoomType/UploadImage"
    :on-change="handleChange"
  >
    <el-button type="primary">上传视频</el-button>
    <template #tip>
      <div class="el-upload__tip">
      </div>
    </template>
  </el-upload>
      </el-form-item> 
      <el-form-item label="房型VR" style="width: 350px;">
        <el-upload
        class="avatar-uploader"
        action="http://120.26.135.179:8033/api/RoomType/UploadImage"
        :show-file-list="false"
        :on-success="handleAvatarSuccessVR"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="RoomTypes.roomTypeVR" :src="RoomTypes.roomTypeVR" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      </el-form-item> 
      <el-form-item label="房型描述" style="width: 350px;">
        <el-input type="textarea" v-model="RoomTypes.roomTypeDesc" placeholder="房型描述" />
      </el-form-item> 
        <el-button type="primary" @click="roomtypesadd()">添加</el-button>
      </div>
    </template>
  </el-drawer>
</ul>
    </div>





    <div>
      <el-drawer v-model="UpdateRoomTypeDialog" title="I am the title" size="85%" :with-header="false">
    <span><h3>编辑房型</h3></span>
    <template #footer>
      <div class="dialog-footer" style="background-color:#f2f2f6;">
        <el-form-item label="房型名称" style="width: 350px;">
        <el-input v-model="RoomTypes1.roomName" placeholder="房间名称" maxlength="10"   />
      </el-form-item>
      <el-form-item label="门市价" style="width: 350px;">
        <el-input v-model="RoomTypes1.roomPrice" placeholder="门市价"  />
      </el-form-item>
      <el-form-item label="押金" style="width: 350px;">
        <el-input v-model="RoomTypes1.roomDeposit" placeholder="押金"  />
      </el-form-item>
      <el-form-item label="房型面积" style="width: 350px;">
        <el-input v-model="RoomTypes1.roomAcreage" placeholder="房型面积"  />
      </el-form-item>
      <el-form-item label="可住人数" style="width: 350px;">
        <el-input v-model="RoomTypes1.peopleNumber" placeholder="可住人数"  />
      </el-form-item>
      <el-form-item label="同住人预留信息" style="width: 350px;">
        <el-switch v-model="RoomTypes1.partner" />
      </el-form-item> 
      <el-form-item label="可否加床" style="width: 550px;">
        <el-radio-group v-model="RoomTypes1.addBed">
        <el-radio value="1">不可加床</el-radio>
        <el-radio value="2">免费加床</el-radio>
        <el-radio value="3">收费加床</el-radio>
        <el-radio value="4">自定义</el-radio>
      </el-radio-group>
      </el-form-item> 
      <el-form-item label="房型图片">
        <el-upload
        class="avatar-uploader"
        action="http://120.26.135.179:8033/api/RoomType/UploadImage"
        :show-file-list="false"
        :on-success="handleAvatarSuccessUPdadte"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="RoomTypes1.roomTypeImage" :src="RoomTypes1.roomTypeImage" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      </el-form-item> 
      <el-form-item label="房型视频" style="width: 350px;">
        <el-upload
    v-model:file-list="RoomTypes.roomTypeVideo"
    class="upload-demo"
    action="http://120.26.135.179:8033/api/RoomType/UploadImage"
    :on-change="handleChangeUPdadte"
  >
    <el-button type="primary">上传视频</el-button>
    <template #tip>
      <div class="el-upload__tip">
      </div>
    </template>
  </el-upload>
      </el-form-item> 
      <el-form-item label="房型VR" style="width: 350px;">
        <el-upload
        class="avatar-uploader"
        action="http://120.26.135.179:8033/api/RoomType/UploadImage"
        :show-file-list="false"
        :on-success="handleAvatarSuccessUPdadteVR"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="RoomTypes1.roomTypeVR" :src="RoomTypes1.roomTypeVR" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      </el-form-item> 
      <el-form-item label="房型描述" style="width: 350px;">
        <el-input type="textarea" v-model="RoomTypes1.roomTypeDesc" placeholder="房型描述" />
      </el-form-item> 
        <el-button type="primary" @click="roomtypesUpdate()">修改</el-button>
      </div>
    </template>
  </el-drawer>
    </div>




<div>
  <el-dialog v-model="RoomCodes" title="新增房号" width="800">
    <el-button type="primary" style="margin-left: 16px" @click="addRoomCode()">新增房号</el-button>
    <el-table :data="roomcodedata">
      <el-table-column property="roomCode" label="房号" width="150" />
      <el-table-column property="roomCodeSort" label="排序" width="200" />
      <el-table-column property="roomCodeMemo" label="备注" width="200" />
      <el-table-column property="address" label="操作" >
        <template #default="{row}">
          <el-button type="text" @click="handleEditCode(row)">编辑</el-button>
          <el-button type="text" @click="handleDeleteCode(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-dialog v-model="RoomCodeNumber" title="新增房号" width="500">
    <el-form :model="roomcode">
      <el-form-item label="房号">
        <el-input v-model="roomcode.roomCode" autocomplete="off" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="roomcode.roomCodeSort" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="roomcode.roomCodeMemo" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="RoomCodeNumber = false">取消</el-button>
        <el-button type="primary" @click="RoomCodeInsert()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="RoomCodeNumberUpdate" title="编辑房号" width="500">
    <el-form :model="roomcode1">
      <el-form-item label="房号">
        <el-input v-model="roomcode1.roomCode" autocomplete="off" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="roomcode1.roomCodeSort" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="roomcode1.roomCodeMemo" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="RoomCodeNumber = false">取消</el-button>
        <el-button type="primary" @click="RoomCodeUpdate()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  </el-dialog>
</div>



  </template>
  
  <script lang="ts" setup>
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { ElMessage ,ElMessageBox} from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import { Search } from '@element-plus/icons-vue'
import type { ElTable, UploadInstance } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
const count = ref(0)
const load = () => {
  count.value += 2
}
const drawer = ref(false)
const form = reactive({
    RoomName:'',
  });
  //钩子函数
onMounted(()=>{
    RoomTypegetlist();
})
//显示房型信息
const tableData = ref([])
  const RoomTypegetlist=()=>{
    axios.get('http://120.26.135.179:8033/api/RoomType',{
        params:{
            RoomName:form.RoomName
        }
    })
    .then(res=>{
        tableData.value=res.data.data;
    })
  }

  const AddRoomTypeDialog=ref(false);
//新增房型
const RoomTypes=reactive({
  roomName:'',
  roomPrice:null,
  roomDeposit:null,
  roomAcreage:null,
  peopleNumber:null,
  partner:false,
  addBed:null,
  roomTypeImage:'',
  roomTypeVideo:'',
  roomTypeVR:'',
  roomTypeDesc:'',
})
const roomtypesadd=()=>{
  axios.post('http://120.26.135.179:8033/api/RoomType',RoomTypes).then(res=>{
    console.log(res);
    if(res.data.code==0){
      ElMessage.success(res.data.message);
      drawer.value=false;
      RoomTypegetlist();
    }
    else{
      ElMessage.error(res.data.message);
    }
  })
}
const value1 = ref(true);

//上传图片
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response
) => {
  RoomTypes.roomTypeImage = response.data;
}
//上传VR
const handleAvatarSuccessVR: UploadProps['onSuccess'] = (
  response
) => {
  RoomTypes.roomTypeVR = response.data;
}
//上传视频
const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  RoomTypes.roomTypeVideo = RoomTypes.roomTypeVideo.slice(-3)
  console.log(RoomTypes.roomTypeVideo)
}
///////////////////修改房型////////////////////////
//上传图片
const handleAvatarSuccessUPdadte: UploadProps['onSuccess'] = (
  response
) => {
  RoomTypes1.value.roomTypeImage = response.data;
}
//上传VR
const handleAvatarSuccessUPdadteVR: UploadProps['onSuccess'] = (
  response
) => { 
  RoomTypes1.value.roomTypeVR = response.data;
}
//上传视频
const handleChangeUPdadte: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  RoomTypes1.value.roomTypeVideo = RoomTypes.roomTypeVideo.slice(-3)
  console.log(RoomTypes.roomTypeVideo)
}


const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('头像图片只能是 JPG 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像图片大小不能超过 2MB!')
    return false
  }
  return true
}

const RoomTypes1=ref({
  id:0,
  roomName:'',
  roomPrice:null,
  roomDeposit:null,
  roomAcreage:null,
  peopleNumber:null,
  partner:false,
  addBed:null,
  roomTypeImage:'',
  roomTypeVideo:'',
  roomTypeVR:'',
  roomTypeDesc:'',
})
//编辑房型
const UpdateRoomTypeDialog=ref(false);
const handleEdit=(row:any)=>{
  UpdateRoomTypeDialog.value=true;
  RoomTypes1.value=row;
  console.log(RoomTypes1.value)
}
const roomtypesUpdate=()=>{
  axios.put('http://120.26.135.179:8033/api/RoomType',RoomTypes1.value).then(res=>{
    console.log(res);
    if(res.data.code==0){
      ElMessage.success(res.data.message);
      RoomTypegetlist();
    }
    else{
      ElMessage.error(res.data.message);
    }
  })
}

//批量删除
  const selectedRows = ref<InstanceType<typeof ElTable>>();
  const handleAllDelete = () => {
  ElMessageBox.confirm(
    '确认要删除吗?',
    '错误',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const selectedRowss=selectedRows.value?.getSelectionRows();
   if(!selectedRowss||selectedRowss.length==0){
     ElMessage.error('请选择要删除的数据');
     return;
   }
   const ids=selectedRowss.map((item:any)=>item.id);
   console.log(selectedRowss);
   console.log(ids);
    axios.delete('http://120.26.135.179:8033/api/RoomType?Ids='+ids).then(res=>{
      if(res.data.code==0){
        ElMessage.success(res.data.message);
        RoomTypegetlist();
      }
      else{
        ElMessage.error(res.data.message);
      }
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    }) 
  };


  //删除房型
  const handleDelete=(row:any)=>{
    ElMessageBox.confirm(
      '确认要删除吗?',
      '错误',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        axios.delete('http://120.26.135.179:8033/api/RoomTypeSingle?Id='+row.id).then(res=>{
          if(res.data.code==0){
            ElMessage.success(res.data.message);
            RoomTypegetlist();
          }
          else{
            ElMessage.error(res.data.message);
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      }) 
  }

//房号管理
const RoomCodes=ref(false);
const SetRoomCode=(row:any)=>{
  RoomCodes.value=true;
  roomcode.roomTypeId=row.id;
  RoomCodegetlist();
  console.log(roomcode.roomTypeId);
}
const roomcodedata=ref([]);
const RoomCodegetlist=()=>{
  axios.get('http://120.26.135.179:8033/api/RoomCodeInfo',{
    params:{
      roomTypeId:roomcode.roomTypeId
    }
  }).then(res=>{
    console.log(res);
    roomcodedata.value=res.data.data;
  })
}

//新增房号
const RoomCodeNumber=ref(false);
const addRoomCode=()=>{
  RoomCodeNumber.value=true;
} 
const roomcode=reactive({
  roomTypeId:null,
  roomCode:'',
  roomCodeSort:null,
  roomCodeMemo:'',
  roomStatus:true
})
const RoomCodeInsert=()=>{
    axios.post('http://120.26.135.179:8033/api/RoomCodeInfo',roomcode)
    .then((res)=>{
        if(res.data.code==0){
            ElMessage.success(res.data.message)
            RoomCodeNumber.value=false;
            RoomCodegetlist();
        }
        else{
            ElMessage.error(res.data.message)
        }
    })
}
const roomcode1=ref({
  roomTypeId:null,
  roomCode:'',
  roomCodeSort:null,
  roomCodeMemo:'',
  roomStatus:true
})
//编辑房号
const RoomCodeNumberUpdate=ref(false);
const handleEditCode=(row:any)=>{
  RoomCodeNumberUpdate.value=true;
  roomcode1.value=row;
  console.log(roomcode1.value)
}

const RoomCodeUpdate=()=>{
  axios.put('http://120.26.135.179:8033/api/RoomCodeInfo',roomcode1.value).then(res=>{
    if(res.data.code==0){
      ElMessage.success(res.data.message);
      RoomCodeNumberUpdate.value=false;
      RoomCodegetlist();
    }
    else{
      ElMessage.error(res.data.message);
    }
  })
}
//删除房号
const handleDeleteCode=(row:any)=>{
    ElMessageBox.confirm('确认要删除吗?','错误',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
    .then(()=>{
        axios.delete('http://120.26.135.179:8033/api/RoomCodeInfoSingle?Id='+row.id)
        .then((res)=>{
            if(res.data.code==0){
                ElMessage.success(res.data.message)
                RoomCodegetlist();
            }
            else{
                ElMessage.error(res.data.message)
            }
        })
    })
    .catch(()=>{
        ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
    })
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<style>
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
</style>